
{extend name="public/base" /}

{block name="main"}


<el-row  :gutter="20">

    <el-col :span="6">

    <el-form  :model="formdata"  label-position="left" label-width="100px"  size="small">

        {foreach $ks as $key=>$vo }
        <el-form-item label="{$vo}：">

            <el-select v-model="formdata.{$key}"  placeholder="请选择">
                <el-option
                        v-for="item in kvData.{$key}"
                        :key="item"
                        :value="item">
                </el-option>
            </el-select>
        </el-form-item>
        {/foreach}



    </el-form>
    </el-col>
    <el-col :span="2"> &nbsp; </el-col>
    <el-col :span="16">
        {include file="public/table_config" tp="sig" /}

    </el-col>
</el-row>

<el-row  type="flex"  justify="center" >
<el-button type="primary" @click="onSubmit">取值</el-button>

</el-row>
<el-row  type="flex"  justify="center" v-show="apiurl">
    API   :  {{apiurl}}
</el-row>
<el-row  type="flex"  justify="center" v-show="vData.id">
    id：<span style="color: #909399">{{vData.id}}</span>&nbsp;
    值：<span style="color: red">{{vData.value}}</span>&nbsp;
    值类型：<span style="color: #909399">{{vData.value_type}}</span>
</el-row>
{/block}

{block name="js"}

<script>
    var distinctConfig= {:json_encode($distinctConfig)};
    var _formdata= {:json_encode($select_Data)};
    var keys= {:json_encode($keys)};
</script>

<script>
    new Vue({
        el: '#app',

        watch: {
            formdata: function () {
                var vm = this;
                vm.vData = {};
                vm.apiurl="";
            },
            "formdata.key": function (val) {
                console.log(val);
                var vm = this;
                vm.vData = {};
                vm.apiurl="";
                this.getConfigList();
            },
        },
        methods: {
            getConfigList(){
                var vm = this;

                if (!vm.formdata.key) {
                    return;
                }

                axios
                    .get('/index/api/selectconfig', {params: {"key": vm.formdata.key}})
                    .then(function (response) {
                        console.log(response.data);
                        vm.tableData = response.data.list;

                    });
            },
            onSubmit() {
                console.log('submit!');
                var vm = this;
                if (!vm.formdata.key) {
                    return;
                }
                vm.apiurl='/getconfigvalue?'+ getSelectString(vm.formdata,keys);
                vm.formdata._format="n";

                axios
                    .get('/getconfigvalue', {params: vm.formdata})
                    .then(function (response) {
                        console.log(response.data);
                        if(!response.data){
                            alert("值为空");
                            vm.vData={};
                        }else
                        vm.vData = response.data;

                    });
            },
        },
        data: {
            apiurl:"",
            vData: {},
            tableData: [],
            formdata: _formdata,
            kvData: distinctConfig,

        },
        mounted: function () {
            this.getConfigList();
            this.onSubmit();
        },
    })
</script>
{/block}